<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
<style>
	    body,html{
	        height: 100%;
	        width: 100%;
	        padding: 0;
	        margin: 0;
	    }
	    .sd{
	        height: 40px;
	        border-bottom: 2px solid white;
	        line-height: 40px;
	    }
	    .ad{
	        width: 270px;
	        background-color: transparent;
	        position: relative;
	        left: 9px;
	        float: left;
	    }
	    #ftip{
	        width: 180px;
	        height: 100%;
	        position: absolute;
	        right: 0;
	        top:0;
	        text-align: left;
	        line-height: 40px;
	        color: green;
	    }
	    #fa{
	        color:turquoise;
	    }
	    #fi{
	        position: absolute;
	        opacity: 0;
	    }
	    body{
	        background-image: url(./img/玩具小屋.jpg);
	        background-size: 100% 100%;
	    }
	
	    .outer{
	        height:700px;
	        width:500px;
	        position: relative;
	        background-color: bisque;
	        top: 50%;
	        left: 50%;
	        transform: translateX(-50%) translateY(-50%);
	        border-radius: 10px;
	        border: 2px solid tomato;
	        box-shadow: 8px 8px 8px #888888;
	    }
	   .register{
	       width: 200px;
	       height: 70px;
	       position: absolute;
	       text-align: center;
	       line-height: 70px;
	       font-size: 40px;
	       font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	       left: 50%;
	       transform: translateX(-50%);
	       top: 50px;
	   }
	    .msg{
	        overflow: hidden;
	        width: 300px;
	        position: relative;
	        top: 50%;
	        left: 50%;
	        transform: translate(-50%,-50%);
	        border-radius: 10px;
	        /* border: 2px solid white; */
	        line-height: 50px;
	
	    }
	    .tologin{
	        position: absolute;
	        height: 50px;
	        width: 200px;
	        background-color: transparent;
	        text-align: right;
	        bottom:120px;
	        right: 105px;
	        color: #0275FE;
	    }
	    a{
	        text-decoration: none;
	        color:  #0275FE;
	    }
	    .tip{
	        position: absolute;
	        color: red;
	        height: 120px;
	        width: 400px;
	        left: 50%;
	        transform: translateX(-50%);
	        bottom: 10px;
	        text-align: center;
	        line-height: 35px;
	        word-wrap: break-word;
	        word-break: break-all;
	        overflow: hidden;
	        padding-top: 0;
	    }
	    .button{
	        border: 0;
	        height: 30px;
	        width: 250px;
	        position: relative;
	        left: 50%;
	        transform: translateX(-50%);
	        font-size: 15px;
	        color: #000000;
	        background: transparent;
	        border: 2px solid #fff;
	        margin-top: 15px;
	        border-radius: 10px;
	        margin-bottom: 5px;
	    }
	    .input{
	        border: 2px solid #fff;
	        width: 200px;
	        font-size: 15px;
	        color: #000000;
	        background: transparent;
	        padding: 5px 10px;
	        outline: none;
	        margin-top: 10px;
	    }
</style>
</head>
<body>
    <div class="outer">
    <div class="register">
        Register
    </div>
    <div class="msg">
        <table>
            <tr>
                <td>用户名:</td>
                <td><input class="input" id="username" type="text" placeholder="请输入用户名" name="username"/></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input class="input" id="password" type="password" placeholder="请输入密码" name="password"/></td>
            </tr>
            <tr>
                <td>昵称:</td>
                <td><input class="input" id="nickname" type="text" placeholder="请输入昵称" name="nickname"/></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td> <input class="input" id="email" type="text" placeholder="请输入邮箱" name="email"/></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><input class="input" id="age" name="age" type="text" placeholder="请输入年龄"/></td>
            </tr>
            <tr>

            </tr>
        </table>
         
        <button class="button" type="button">注册</button>
    </div>
    <div class="tologin">
        <p><button onclick="goLoginPage()">已有账号?去登陆</button></p>
    </div>
    <div class="tip">
       <span id="s1"></span>
        <span id="s2"></span><br>
        <span id="s3"></span>
        <span id="s4"></span><br>
        <span id="s5"></span>
        
    </div>
    </div>
</body>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">

//去到登录页面
	function goLoginPage(){
     //跳转到登录页面
	location.href="index.html"
	}
			
$(function(){

    $("#fi").blur(function(){
        $("#ftip").text($("#fi").val())
    })

    $("#user").focus(function(){
        if($("#s1").text()!=""){
            $("#s1").text("")
        }
    })

    $("#pass").focus(function(){
        if($("#s2").text()!=""){
            $("#s2").text("")
        }
    })
    $("#name").focus(function(){
        if($("#s3").text()!=""){
            $("#s3").text("")
        }
    })
    $("#email").focus(function(){
        if($("#s4").text()!=""){
            $("#s4").text("")
        }
    })
    $("#age").focus(function(){
        if($("#s5").text()!=""){
            $("#s5").text("")
        }
    })
   
    $(".button").click(function(){
        let et = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        let nt = /^[0-9]{1,4}$/
    
        if($("#username").val().trim()==""){
            $("#s1").text("用户名不能为空")
        }
        if($("#password").val().trim()==""){
            $("#s2").text("密码不能为空")
        }
        if($("#age").val().trim()<0 || $("#age").val().trim()>9999 || !nt.test($("#age").val())){
            $("#s5").text("年龄不能为空")
        }
        if($("#nickname").val().trim()==""){
            $("#s3").text("昵称不能为空")
        }
        if(! et.test($("#email").val())){
            $("#s4").text("邮箱不能为空")
        }


        if( $("#s1").text()=="" && $("#s2").text()=="" && $("#s3").text()=="" && $("#s4").text()=="" && $("#s5").text()=="" && $("#s6").text()==""){

            let files = $("#fi").prop('files')
            let data = new FormData();
            data.append('username',$("#username").val().trim())
            data.append('password',$("#password").val().trim())
            data.append('email',$("#email").val().trim())
            data.append('age',$("#age").val().trim())
            data.append('nickname',$("#nickname").val().trim())

            $.ajax({
                type:'post',
                url:'http://localhost:8080/user/register',
                contentType:false,
                processData:false,
                cache:false,
                data:data,
                success(res){
					if(res==1){
						alert("注册成功!");
					//自动跳转到登录页面
					location.href="index.html";
					}else if(res==-1){
						alert("注册不成功!")
					}else if(res == -2){
						alert("邮箱已经被注册！");
						}
                    
                }
            })
        } 
    })
})

</script>
</html>